<style lang="less">
  #div_truck_load_abnormal_log {

  }
</style>

<template>
  <div id="div_truck_load_abnormal_log">
    <el-dialog :visible.sync="isShow" width="40%">
      <el-form ref="truckLoadOrderExceptionReport" :model="truckLoadOrderExceptionReport" label-width="110px">
        <el-form-item label="异常类型" prop="exceptionType"
                      :rules="{ required: true, message: '请选择异常类型', trigger: 'change' }">
          <el-select class="f-w70" v-model.number="truckLoadOrderExceptionReport.exceptionType"
                     clearable
                     placeholder="请选择异常类型">
            <el-option v-for="(tl,index) in $store.getters.TRUCK_EXCEPTION_TYPE"
                       :label="tl.cnDictValname"
                       :value="tl.dictVal" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="异常描述">
          <el-input class="f-w70" type="textarea"
                    v-model="truckLoadOrderExceptionReport.exceptionDescription"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            action="/api/v3.0/admin/api/file_upload"
            list-type="picture-card"
            :file-list="fileList"
            :limit="5"
            :on-exceed="handleExceed"
            :on-change="handleChange"
            :headers="this.$store.state.headersAuthorization"
            ref="upload"
            :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="f-fr f-ml10" @click="createTruckLoadAbnormalLogClick">确 认</el-button>
          <el-button class="f-fr" @click="isShow=!isShow">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { resetForm } from '../../lib/util.js';
import { saveTruckLoadOrderExceptionReport } from '../../api/truck-load/TruckLoadOrderExceptionReport.js';

export default {
  name: 'TruckLoadAbnormalLogCreateDialog',
  props: {
    truckLoadOrder: {}
  },
  watch: {
    truckLoadOrder (val) {
      resetForm(this.$refs.truckLoadOrderExceptionReport, this.truckLoadOrderExceptionReport);
      let model = JSON.parse(val);
      this.truckLoadOrderExceptionReport.truckLoadOrderId = model.id;
      this.fileList = [];
      this.isShow = model.isShow;
    }
  },
  data () {
    return {
      truckLoadOrderId: null,
      isShow: false,
      fileList: [],
      truckLoadOrderExceptionReport: {
        exceptionType: null,
        imgPaths: null,
        feedbackRole: 107010003,
        truckLoadOrderId: null,
        exceptionDescription: null
      },
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handleChange (file, fileList) {
      this.fileList = fileList;
    },
    handleExceed () {
      this.$message.warning('最多只能上传5张图片');
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 和 png格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    createTruckLoadAbnormalLogClick () {
      this.$refs['truckLoadOrderExceptionReport'].validate(truckLoadOrderExceptionReportValid => {
        if (truckLoadOrderExceptionReportValid) {
          let urls = this.fileList.map(url => url.response[0]).join();
          let o = this.truckLoadOrderExceptionReport;
          o.imgPaths = urls;
          o.feedbackRole = 107010003;
          saveTruckLoadOrderExceptionReport(o).then((res) => {
            if (res.status === 201) {
              this.$message.success('登记成功');
              this.$emit('isRefresh', true);
            }
            this.isShow = false;
          });
        }
      });
    },
    handleRemove (file, fileList) {
      this.fileList = fileList;
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  mounted () {
    this.$store.commit('initDict');
  }
}
;
</script>
